<template>
  <div>
    <h1 style="text-align: center">商品列表</h1>
    <!-- 相当于a标签 -->
    <router-link to="/dish/add">
      <el-button type="primary">商品添加</el-button>
    </router-link>
    <!-- 把数据请求回来 到request中 -->
    <el-table :data="dishList" style="width: 100%">
      <el-table-column prop="name" label="商品名称" width="180">
      </el-table-column>
      <el-table-column prop="price" label="商品价格" width="180">
      </el-table-column>
      <!-- 图片需要自己写自定义指令标签 -->
      <el-table-column label="商品图片" width="180">
        <template slot-scope="scope">
          <img
            width="100"
            height="100"
            :src="'/admin/' + scope.row.imgpath"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column label="商品规格" width="260">
        <!-- 过滤 ===== -->
        <template slot-scope="scope">
          <span>
            {{ scope.row.specifications | speAndKind }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="商品类别" width="180">
        <!-- 过滤 ===== -->
        <template slot-scope="scope">
          <span>
            {{ scope.row.kind | speAndKind }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="是否上架" width="180">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.enable"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="catname" label="商品分类" width="180">
      </el-table-column>
      <el-table-column label="操作" width="180">
        <!-- 编辑需要有商品id  对话框做-->
        <template slot-scope="scope">
          <el-button
            type="success"
            v-permission="{ path: '/dish/edit', name: '商品修改' }"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            v-permission="{ path: '/dish/del', name: '商品删除' }"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 点击编辑  对话框 做 -->
    <el-dialog title="提示" :visible.sync="dialogVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload
            class="upload-demo"
            action="/admin/api/uploads"
            :show-file-list="false"
            accept=".jpg,.png,.jpeg,.webp,.gif"
            name="dishimg"
            :on-success="successUpload"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <img
            v-show="form.imgpath === ''"
            width="100"
            height="100"
            src="../../assets/wu.jpg"
            alt=""
          />
          <img
            v-show="form.imgpath != ''"
            width="100"
            height="100"
            :src="'/admin/' + form.imgpath"
            alt=""
          />
        </el-form-item>
        <el-form-item label="商品规格">
          <!-- 过滤 ===== -->
          <div class="specs" v-for="(spec, index) in form.specs" :key="spec.id">
            <el-input v-model="spec.value"></el-input>
            <!-- 按钮添加点击事件 -->
            <el-button
              @click="addspec"
              v-if="index === form.specs.length - 1"
              type="primary"
              icon="el-icon-circle-plus-outline"
              circle
            ></el-button>
            <!-- 大于二显示 -->
            <el-button
              @click="reducespec"
              v-if="index === form.specs.length - 1 && form.specs.length > 2"
              type="primary"
              icon="el-icon-remove-outline"
              circle
            ></el-button>
          </div>
        </el-form-item>
        <el-form-item label="商品类别">
          <!-- 过滤 ===== -->
          <div class="specs" v-for="(kind, index) in form.kinds" :key="kind.id">
            <el-input v-model="kind.value"></el-input>
            <!-- 按钮添加点击事件 -->
            <el-button
              @click="addkind"
              v-if="index === form.kinds.length - 1"
              type="primary"
              icon="el-icon-circle-plus-outline"
              circle
            ></el-button>
            <!-- 大于二显示 -->
            <el-button
              @click="reducekind"
              v-if="index === form.kinds.length - 1 && form.kinds.length > 2"
              type="primary"
              icon="el-icon-remove-outline"
              circle
            ></el-button>
          </div>
        </el-form-item>
        <el-form-item label="是否上架">
          <el-switch
            v-model="form.enable"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="商品分类">
          <el-input v-model="form.catname"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="onSubmit">立即创建</el-button>
          <el-button type="danger" @click="quxiao">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 删除 对话框做 -->
  </div>
</template>

<script>
//导入商品列表函数 所有分类 商品编辑 商品删除
import { DishList, CatList, DishEdit, DishDel } from "@/request";
//导入按钮自定义指令权限  函数
import permission from "@/utils/permission";
export default {
  //按钮权限
  directives: {
    permission,
  },
  //过滤一下 =====
  filters: {
    //第一个参数是要过滤的value
    speAndKind(value) {
      return value.split("=====").join(" / ");
    },
  },
  data() {
    return {
      //默认情况下 隐藏 对话框
      dialogVisible: false,
      csts: [],
      dishList: [],
      form: {
        name: "",
        price: "",
        catname: "",
        enable: false,
        imgpath: "",
        detail: "",
        specs: [],
        kinds: [],
      },
      // //规格
      // specs: [
      //   {
      //     id: 1,
      //     value: "",
      //   },
      //   {
      //     id: 2,
      //     value: "",
      //   },
      // ],
      // //类别
      // kinds: [
      //   {
      //     id: 1,
      //     value: "",
      //   },
      //   {
      //     id: 2,
      //     value: "",
      //   },
      // ],
    };
  },
  methods: {
    // // 点击编辑  对话框显示
    handleEdit(index, row) {
      this.dialogVisible = true;
      this.form = Object.assign(this.form, row);
      // console.log(333,this.form);
      let spec = row.specifications.split("=====");
      let kind = row.kind.split("=====");
      console.log(kind, 222);
      // console.log(this.form,111222);
      // return
      spec.forEach((item) => {
        this.form.specs.push({
          value: item,
        });
      });
      kind.forEach((item) => {
        this.form.kinds.push({
          value: item,
        });
      });
      console.log(this.form.kinds, 111);
    },
    //删除按钮
    async handleDelete(index, row) {
      // console.log(index,row);
      this.$confirm("真的要残忍的删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //调用发送过来的请求
        DishDel(row).then(data => {
          let {error_code,msg} = data
          // 判断删除成功或者失败
          if(error_code === 200){
              this.$message({
                  type: "success",
                  message: msg,
                  duration:1500,
          })
          // 删除失败
        }else{
           this.$message({
                  type: "error",
                  message: msg,
                  duration:1500,
          })
        }
          // 重新渲染
        this.getDishList();
        })
      }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //点击立即创建发送请求
    async onSubmit() {
      let specifications = this.form.specs
        .map((item) => item.value)
        .join("=====");
      this.form.specifications = specifications;
      let kind = this.form.kinds.map((item) => item.value).join("=====");
      this.form.kind = kind;
      console.log(this.form, 666);
      //   console.log(111,this.form.detail);
      let data = await DishEdit(this.form);
      // console.log(data);
      let { error_code, msg } = data;
      if (error_code === 200) {
        this.$message({
          type: "success",
          duration: 1500,
          message: msg,
          onClose: () => {
            this.dialogVisible = false;
            this.form = {
              name: "",
              price: "",
              imgpath: "",
              enable: false,
              detail: "",
              specs: [],
              kinds: []
            };
            this.getDishList();
          },
        });
      } else {
        this.$message({
          type: "error",
          duration: 1500,
          message: msg,
        });
      }
      // console.log(this.form);
    },
    addspec() {
      this.form.specs.push({
        id: this.form.specs.length + 1,
        value: "",
      });
    },
    // 删除最后一个
    reducespec() {
      this.form.specs.pop();
    },
    addkind() {
      this.form.kinds.push({
        id: this.form.kinds.length + 1,
        value: "",
      });
    },
    // 删除最后一个
    reducekind() {
      this.form.kinds.pop();
    },
    // 文件上传时的钩子
    successUpload(response, file, fileList) {
      // console.log(response,file, fileList);
      // 请求回来的图片
      this.form.imgpath = response.data.filepath;
    },
    //点击取消  对话框隐藏
    quxiao() {
      this.dialogVisible = false;
      this.$router.push("/dish/list");
      this.form.specs = [];
      this.form.kinds = [];
    },
    //请求回来的所有商品分类
    async getCatList() {
      let data = await CatList();
      this.cats = data.data.catlist;
    },
    //定义方法
    async getDishList() {
      //等待调用的结果  把数据赋值给 dishList
      let data = await DishList();
      // 把数据赋值给 dishList
      this.dishList = data.data.dishlist;
    },
  },
  created() {
    //调用 方法
    this.getDishList();
    this.getCatList();
  },
};
</script>

<style lang="scss" scoped>
.specs {
  display: flex;
  .el-button.is-circle {
    padding: 0;
  }
  .el-button {
    font-size: 35px;
  }
  .el-input {
    width: 90%;
  }
}
.quill-editor {
  width: 800px;
  height: 300px;
  background-color: cornsilk;
}
</style>
